<template>
	<view>
		<view class="bbox">
			<view class="listBox" v-for="(item,index) in list" :key="index">
				<view class="xuanze" v-if="!item.xuanze" @click="xuanze(index,true)">
					<u-icon class="icon" name="checkbox-mark" size="20" :custom-style="iconcss"></u-icon>
				</view>
				<view class="xuanze xztrue" v-if="item.xuanze" @click="xuanze(index,false)">
					<u-icon class="icon" name="checkbox-mark" size="20" :custom-style="iconcss"></u-icon>
				</view>
				<view class="item_box">
					<view class="left">
						<u-image width="140rpx" height="140rpx" :src="item.image"></u-image>
					</view>
					<view class="right">
						<view class="name">
							{{item.store_name}}
						</view>
						<view class="guige">
							<text style="color: #808080;" v-if="item.attrInfo.suk">规格:</text>
							<text style="color: #010101;">{{item.attrInfo.suk ?item.attrInfo.suk:"" }}</text>
						</view>
						<view class="danjia">
							<text class="yuanjia">
								<text style="font-size: 24rpx;">FCFA</text> {{item.costPrice}}
							</text>
							<text class="danjia"> <text style="font-size:24rpx;">FCFA</text> {{item.truePrice}} </text>
							<label class="num">
								<text class="num_name">数量:</text>
								<input class="shurukuang" type="number" @blur="xiugai($event,index,item)" :value="item.cart_num" />
							</label>
						</view>
					</view>
				</view>
				<view class="deleteBox" @click="shanchu(item,index)">
					<image src="../../static/fel/delete.png" mode="scaleToFill"></image>
				</view>
			</view>
		</view>
		<view class="btmbox">
			<view class="btm_left">
				<view class="xuanze" v-if="xuanzhongarr.length !== list.length || list.length == 0" @click="quanxuan(true)">
					<u-icon class="icon" name="checkbox-mark" size="20" :custom-style="iconcss"></u-icon>
				</view>
				<view class="xuanze xztrue" v-else @click="quanxuan(false)">
					<u-icon class="icon" name="checkbox-mark" size="20" :custom-style="iconcss"></u-icon>
				</view>
				<view class="quanxuan">
					全选
				</view>
				<view class="heji">
					<text style="font-size: 32rpx; color: #000;">合计 : </text>
					<text style="color: #FF392B; font-size: 30rpx;">FCFA</text>
					<text style="color: #FF392B; font-size: 32rpx;">{{zongjia}}</text>
				</view>
			</view>
			<view class="btm_right" v-if="xuanzhongarr.length == 0">
				结算
			</view>
			<view class="btm_right active" v-else @click="jiesuan">
				结算
			</view>
		</view>
	</view>
</template>

<script>
	//购物车添加商品数量
	export default {
		data() {
			return {
				list: [],
				xuanzhongarr: [],
				iconcss: {
					lineHeight: "38rpx",
					textAlign: "center",
					color: "#Fff"
				},
				zongjia: 0,
				info: null,
				first: false

			};
		},
		watch: {
			xuanzhongarr(newValue, oldValue) {
				var data = 0;
				for (let i in this.xuanzhongarr) {
					data = data + this.list[this.xuanzhongarr[i]].truePrice * this.list[this.xuanzhongarr[i]].cart_num
					this.xuanzhongarr[i]
					this.list[this.xuanzhongarr[i]].xuanze = true;
				}
				this.zongjia = data.toFixed(2);
			}
		},
		onLoad() {
			// uni.showShareMenu()
			uni.getStorage({
				key: 'userinfo',
				success: (res) => {
					this.info = res.data
					this.first = true;
					this.getlist()
				}
			})
		},
		onHide() {
			this.list = [];
			this.xuanzhongarr = [];
			this.zongjia = 0;
		},
		onShow() {
			if (this.first) {
				this.getlist()
			}
		},
		methods: {
			getlist() {
				uni.request({
					url: this.$AJAX_URL + 'cart/cart_list',
					method: 'POST',
					data: {
						uid: this.info.uid
					},
					success: (res) => {
						console.log(res);
						this.list = res.data.data
					}
				})
			},
			xuanze(index, val) {
				this.list[index].xuanze = val;
				if (val) {
					this.xuanzhongarr.push(index);
				} else {
					for (let i in this.xuanzhongarr) {
						if (this.xuanzhongarr[i] == index) {
							this.xuanzhongarr.splice(i, 1)
						}
					}
				}
			},
			quanxuan(val) {
				if (val) {
					this.xuanzhongarr = []
					for (let i in this.list) {
						this.xuanzhongarr.push(i)
					}
				} else {
					this.xuanzhongarr = [];
					for (let i in this.list) {
						this.list[i].xuanze = false
					}
				}
			},
			xiugai(event, index, item) {
				console.log(event);
				if (event.detail.value < 1) {
					event.detail.value = 1
					this.list[index].cart_num = event.detail.value;
				} else {
					this.list[index].cart_num = event.detail.value;
				}

				var data = 0;
				for (let i in this.xuanzhongarr) {
					data = data + this.list[this.xuanzhongarr[i]].truePrice * this.list[this.xuanzhongarr[i]].cart_num
					this.xuanzhongarr[i]
					this.list[this.xuanzhongarr[i]].xuanze = true;
				}
				this.zongjia = data.toFixed(2);
				uni.request({
					url: this.$AJAX_URL + 'cart/change_cart_num',
					method: 'POST',
					data: {
						uid: this.info.uid,
						id: item.id,
						num: this.list[index].cart_num
					},
					success: (res) => {
						console.log(res);
					}
				})
			},
			shanchu(item, index) {
				uni.showModal({
					title: '删除',
					content: '确认删除商品吗?',
					success: (res) => {
						if (res.confirm) {
							uni.request({
								url: this.$AJAX_URL + 'cart/del_cart',
								method: 'POST',
								data: {
									uid: this.info.uid,
									id: item.id
								},
								success: (res) => {
									console.log(res);
									if (res.data.code == 200) {
										this.list.splice(index, 1)
										this.$u.toast('删除成功')
										this.xuanzhongarr = []
										for (var i = 0; i < this.list.length; i++) {
											this.list[i].xuanze = false
										}
									} else {
										this.$u.toast(res.data.msg)
									}
								}
							})
						} else {
							return false
						}
					}
				})
			},
			jiesuan() {
				var data = [];
				for (var i = 0; i < this.xuanzhongarr.length; i++) {
					data.push(this.list[this.xuanzhongarr[i]].id)
				}
				uni.navigateTo({
					url: '../dingdan/dingdan?id=' + data.toString()
				})
				// uni.request({
				// 	url: this.$AJAX_URL + 'order/confirm_order',
				// 	method:'POST',
				// 	data: {
				// 		uid: this.info.uid,
				// 		cart_id: data.toString()
				// 	},
				// 	success: (res) => {
				// 		console.log(res);
				// 	}

				// })
			}


		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}

	.listBox {
		margin-top: 10rpx;
		height: 200rpx;
		background-color: #FFFFFF;
		margin-left: 20rpx;
		margin-right: 20rpx;
		border-radius: 20rpx;
		display: flex;
		position: relative;

		.xuanze {
			width: 38rpx;
			height: 38rpx;
			border-radius: 50%;
			border: 1px solid #999999;
			margin-top: 82rpx;
			margin-left: 20rpx;
			margin-right: 20rpx;
			text-align: center;
			line-height: 38rpx;

			.icon {
				position: relative;
				top: -5rpx;
			}
		}

		.xztrue {
			border-color: #FF423F;
			background: #FF423F;
		}

		.item_box {
			display: flex;
			padding-top: 30rpx;
			width: 100%;

			.left {
				width: 140rpx;
				height: 140rpx;
				border-radius: 10rpx;
				overflow: hidden;
			}

			.right {
				width: 468rpx;
				margin-left: 20rpx;
				position: relative;

				.name {
					font-size: 32rpx;
					color: #010101;
				}

				.guige {
					font-size: 24rpx;
					margin-top: 10rpx;
				}

				.danjia {
					margin-top: 25rpx;

					.yuanjia {
						color: #999999;
						text-decoration: line-through;
						font-size: 32rpx;
						margin-right: 25rpx;
					}

					.danjia {
						color: #000000;
						font-size: 32rpx;

					}

					.num {
						position: absolute;
						right: 0;
						bottom: 10rpx;

						.num_name {
							position: relative;
							top: -10rpx;
							left: -10rpx;
						}

						.shurukuang {
							width: 120rpx;
							height: 42rpx;
							text-align: center;
							display: inline-block;
							background: #F7F7F7;
						}
					}
				}
			}
		}

		.deleteBox {
			position: absolute;
			width: 24rpx;
			height: 26rpx;
			right: 20rpx;
			top: 18rpx;

			image {
				width: 24rpx;
				height: 26rpx;
			}
		}
	}

	.bbox {
		margin-bottom: 100rpx;
	}

	.btmbox {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 98rpx;
		background: #FFFFFF;
		display: flex;

		.xuanze {
			width: 38rpx;
			height: 38rpx;
			border-radius: 50%;
			border: 1px solid #999999;
			margin-top: 30rpx;
			margin-left: 40rpx;
			margin-right: 20rpx;
			text-align: center;
			line-height: 38rpx;

			.icon {
				position: relative;
				top: -5rpx;
			}
		}

		.btm_left {
			display: flex;
			position: relative;
			width: 500rpx;
		}

		.quanxuan {
			color: #000000;
			font-size: 32rpx;
			line-height: 98rpx;
			margin-left: 10rpx;
		}

		.heji {
			line-height: 98rpx;
			position: absolute;
			right: 29rpx;
		}

		.btm_right {
			width: 250rpx;
			text-align: center;
			line-height: 98rpx;
			color: #FFFFFF;
			background-color: #D9D9D9;
		}

		.active {
			background-color: #FF392B;
		}

		.xztrue {
			border-color: #FF423F;
			background: #FF423F;
		}
	}
</style>
